<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 头部 -->
			<cu-custom bgColor="bg-rgb" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">扫描入库</block>
			</cu-custom>
			<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
				<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav"
					:key="index" @tap="tabSelect" :data-id="index">
					{{tabNav[index]}}
				</view>
			</scroll-view>
			<!-- 查询条件 -->
			<view ref="viewport" class="fixed" :style="[{animationDelay: 0.1 + 's', top:CustomBar + 38 + 'px'}]"
				id="searchWrap">
				<form>
					<template v-if="TabCur === 1">
						<view class="cu-form-group last">
							<image class="icon" src="../../static/saomiao.png" mode=""></image>
							<input key="no-input" :focus="focusIndex === 0" placeholder="请扫描二维码" name="input"
								v-model="myFormData.qrCode" @confirm="inputQuery"></input>
						</view>
						<!-- <view class="cu-form-group last">
							<input key="no-input" placeholder="请输入备注信息" name="input" v-model="modalInput"></input>
						</view> -->
					</template>
					<template v-else>
						<view class="cu-form-group last">
							<image class="icon" src="../../static/saomiao.png" mode=""></image>
							<input key="has-input" :focus="focusIndex === 0" placeholder="请扫描二维码" name="input"
								v-model="myFormData.qrCode" @confirm="inputQuery"></input>
						</view>
						<view class="cu-form-group last" v-if="TabCur === 0">
							<image class="icon" src="../../static/saomiao.png" mode=""></image>
							<input :focus="focusIndex === 1" placeholder="请扫描货架编码" name="input"
								v-model="myFormData.shelfCode" @confirm="handleShelves"></input>
						</view>
					</template>
					<template>
						<view class="cu-form-group last" v-if="array.length>0">
							<picker rangeKey="areaName" :value="index" @change="bindPickerChange" :range="array">
								<label>区域：</label>
								<label>{{array[index].areaName}}</label>
							</picker>
						</view>
						<view class="cu-form-group last" v-if="array2.length>0">
							<picker rangeKey="locationCode" :value="index2" @change="bindPickerChange2" :range="array2">
								<label>位置：</label>
								<label>{{array2[index2].locationCode}}</label>
							</picker>
						</view>
					</template>
				</form>
			</view>

			<view class="list" ref="listRef" :style="listStyle">
				<view class="card animation-slide-bottom" v-for="(item,index) in list" :key="index"
					:style="[{animationDelay: (index + 1)*0.1 + 's'}]">
					<view class="top">
						<view class="left">物料编号：<text>{{item.productCode}}</text></view>
						<view class="right">{{item.inwareNum}}</view>
					</view>
					<view class="line">

					</view>
					<view class="bottom">
						<view class="box">
							<view class="lable">
								创建时间:
							</view>
							<view class="content">
								{{item.createTime}}
							</view>
						</view>
						<view class="box">
							<view class="lable">
								名称:
							</view>
							<view class="content">
								{{item.productName}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="none" v-if="noDataAvailable">
				<view class="none1">
					暂无数据
				</view>
			</view>
			<view class="none2" v-if="noMoreDataAvailable">
				没有更多数据
			</view>
			<!-- <view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">请输入备注信息</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						<input :focus="modalFocus" @focus="InputFocus" @blur="InputBlur" :adjust-position="false"
							v-model="modalInput" class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
							<button class="cu-btn bg-blue margin-left" @tap="handleModal">确定</button>

						</view>
					</view>
				</view>
			</view> -->
		</scroll-view>
	</view>
</template>

<script>
	import { debounce } from '@/common/util/tools.js'
	export default {
		name: 'scanning',
		data() {
			return {
				noDataAvailable: false, // 暂无数据 状态
				noMoreDataAvailable: false, // 没有更多数据 状态
				pageNo: 1, // 上拉加载分页
				InputBottom: 0,
				modalInput: '',
				modalName: '',
				TabCur: 0,
				tabNav: ['有货架入库', '无货架入库'],
				focusIndex: 0,
				id: '',
				myFormData: {
					qrCode: '',
					shelfCode: ''
				},
				list: [],
				qrCodeInfo: {},
				modalFocus: false,
				isAllScan: false,
				array: [],
				array2:[],
				index:0,
				index2:0,
				quyuId:'',
				// weizhiId:'',
				areaCode:'',
				weizhiCode:'',
			}
		},
		onShow(e) {
			this.index = uni.getStorageSync('quyuIndex') ? uni.getStorageSync('quyuIndex') : 0
			this.index2 = uni.getStorageSync('weizhiIndex') ? uni.getStorageSync('weizhiIndex') : 0
			// console.log(111,this.index,this.index2)
			this.isAllScan = this.$Route.query.isAllScan
			this.id = this.isAllScan ? uni.getStorageSync('warehouseId') : uni.getStorageSync('scanEnterStoreId');
			this.pageNo=1;
			this.noDataAvailable=false;
			this.noMoreDataAvailable=false;
			this.list=[];
			this.getMesStorageWholesaleList()
			this.getArray()
		},
		computed: {
			listStyle: function() {
				return {
					marginTop: this.TabCur === 1 ? '420rpx' : '520rpx'
				}
			}
		},
		onReachBottom: function() {
			let _this = this
			if (this.noDataAvailable == true || this.noMoreDataAvailable == true) {
				return
			}
			_this.pageNo++
			_this.getMesStorageWholesaleList()
		},
		methods: {
			getArray(){
				this.$http.get('storage/mesWarehouseArea/list',{
					params:{
						pageNo:1,
						pageSize:1000,
					}
				}).then(res=>{
					if(res.data.success){
						this.array = res.data.result.records
						this.quyuId = this.array[this.index].id
						this.areaCode = this.array[this.index].areaCode
						this.getArea()
					}else{
						this.modal.show({
							type: 'error',
							content: res.data.message
						})
					}
				})
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.quyuId = this.array[this.index].id
				this.areaCode = this.array[this.index].areaCode
				uni.setStorageSync('quyuIndex',this.index)
				this.index2 = 0
				uni.setStorageSync('weizhiIndex',this.index2)
				this.getArea()
			},
			bindPickerChange2: function(e) {
				this.index2 = e.target.value
				uni.setStorageSync('weizhiIndex',this.index2)
				this.weizhiCode = this.array2[this.index2].locationCode
			},
			getArea(){
				this.array2 = []
				this.weizhiCode = ''
				this.$http.get('storage/mesWarehouseArea/queryMesWarehouseAreaLocationByMainId',{
					params:{
						id:this.quyuId
					}
				}).then(res=>{
					if(res.data.success){
						this.array2 = res.data.result
						this.weizhiCode = this.array2[this.index2].locationCode
					}else{
						this.modal.show({
							type: 'error',
							content: res.data.message
						})
					}
				})
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			handleModal() {
				// if (this.modalInput.trim().length === 0) {
				// 	this.modal.show({
				// 		type: 'error',
				// 		content: '请输入备注信息'
				// 	})
				// 	return
				// }
				if(!this.weizhiCode){
					return this.modal.show({
						type: 'error',
						content: '请选择位置'
					})
				}
				// this.hideModal()
				this.handleShelves()
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.myFormData.qrCode = ''
				this.myFormData.shelfCode = ''
				this.qrCodeInfo = {}
			},
			// 列表查询
			getMesStorageWholesaleList() {
				uni.showLoading({
					mask: true,
					title: '加载中.....'
				})
				let data = {
					pageNo: this.pageNo,
					pageSize: 5,
					baseRownum: this.id
				}
				this.$http.get('storage/mesStorageWholesale/list', {
					params: data
				}).then(res => {
					uni.hideLoading()
					console.log("res1::", res)
					if (res.data.success) {
						this.list = this.list.concat(res.data.result.records);
						if (this.list.length == 0) {
							this.noDataAvailable = true;
						} else if (this.list.length > 0 && res.data.result.records.length == 0) {
							this.noMoreDataAvailable = true;
						} else if (res.data.result.total <= this.list.length) {
							this.noMoreDataAvailable = true;
						}
					} else {
						// this.$tip.error(res.data.message)
						this.modal.show({
							type: 'error',
							content: res.data.message
						})
					}
				})
			},
			// 扫码查询
			inputQuery: debounce(function(event, index) {
				uni.showLoading({
					mask: true,
					title: '查询中.....'
				})
				let data = {
					id: this.myFormData.qrCode
				}
				this.$http.get('storage/mesStorageWholesale/queryById', {
					params: data
				}).then(res => {
					uni.hideLoading()
					console.log("res2::", res)
					if (res.data.success) {
						this.qrCodeInfo = res.data.result
						if (this.TabCur === 1) {
							this.handleModal()
							// this.modalName = 'DialogModal'
							// this.modalFocus = true
							// return
						}
						this.focusIndex = 1
					} else {
						this.myFormData.qrCode = ''
						// this.$tip.error(res.data.message)
						this.modal.show({
							type: 'error',
							content: res.data.message
						})
					}
				})
			},1000),
			handleShelves: debounce(function(event, index) {
				this.getMesStorageWholesaleAdd(this.qrCodeInfo)
			},1000),
			// 添加
			getMesStorageWholesaleAdd(item) {
				uni.showLoading({
					mask: true,
					title: '添加中.....'
				})
				let data = item
				console.log(data)
				data.baseDockettype = '扫描入库';
				data.mobileCode = "106";
				data.baseRownum = this.id;
				data.shelfCode = this.TabCur === 0 ? this.myFormData.shelfCode : '无货架入库';
				data.id = this.myFormData.qrCode;
				data.shelfState = "0";
				data.locationCode = this.weizhiCode
				data.areaCode = this.areaCode
				// if (this.TabCur === 1) {
				// 	data.wareSite = this.modalInput
				// }
				console.log(data)
				let postUrl = this.isAllScan ? 'storage/mesStorageWholesale/addScanStoreAll' :
					'storage/mesStorageWholesale/addScanStore'
				this.$http.post(postUrl, data).then(res => {
					uni.hideLoading()
					console.log("res3::", res)
					this.pageNo = 1
					this.list = []
					this.getMesStorageWholesaleList()
					if (res.data.success) {
						// this.$tip.success(res.data.message)
						this.modal.show({
							type: 'success',
							content: res.data.message
						})
						this.myFormData.qrCode = ''
						this.myFormData.shelfCode = ''
						this.qrCodeInfo = {}
						this.focusIndex = 0
					} else {
						// this.$tip.error(res.data.message)
						this.modal.show({
							type: 'error',
							content: res.data.message
						})
						this.myFormData.shelfCode = ''
					}
				})
			}
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f1f1f1;

		.fixed {
			position: fixed;
			z-index: 1;
			width: 100%;
			background-color: white;
			// height: 100rpx;
			border-bottom: 1rpx solid #eee;

			.last {
				border-bottom: 1rpx solid #eee;
				position: relative;

				.icon {
					width: 30rpx;
					height: 29rpx;
					position: absolute;
					top: 36rpx;
					left: 60rpx;
				}

				input {
					width: 686rpx;
					height: 68rpx;
					background: #FFFFFF;
					border: 1px solid #D5D8DF;
					border-radius: 34px;
					padding-left: 79rpx;
				}
			}
		}

		.list {
			// margin-top: 220rpx;

			.card {
				margin: 30rpx;
				box-shadow: 0px 0px 5rpx 2rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx;
				background-color: white;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-weight: bold;
					padding: 20rpx 30rpx;

					.left {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #485A75;
						line-height: 50rpx;
					}

					.right {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #191919;
						line-height: 50rpx;
					}
				}

				.line {
					width: 750rpx;
					height: 10rpx;
					background: #F3F5F9;
				}

				.bottom {
					padding: 20rpx 30rpx;

					.box {
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;
						align-items: center;

						.lable {
							color: #485A75;
							font-size: 28rpx;
						}

						.content {
							width: 70%;
							text-align: right;
							color: #191919;
							font-weight: bold;
						}
					}
				}
			}
		}
	}

	// input {
	// 	border: 2rpx solid #F0F0F0;
	// 	height: 60rpx;
	// 	padding: 10rpx;
	// 	border-radius: 10rpx;
	// 	font-size: 20rpx;
	// }
	// .fixed {
	// 	position: fixed;
	// 	z-index: 1;
	// 	width: 100%;
	// 	background-color: white;
	// 	height: 100rpx;
	// 	border-bottom: 1rpx solid #eee;
	// }
	// .list {
	// 	margin-top: 120rpx;
	// }

	// .card {
	// 	margin: 30rpx;
	// 	box-shadow: 0px 0px 5rpx 2rpx rgba(0, 0, 0, 0.1);
	// 	border-radius: 10rpx;
	// 	padding: 30rpx;
	// 	background-color: white;
	// }

	// .card .top {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	border-bottom: 1rpx solid #F0F0F0;
	// 	padding-bottom: 20rpx;
	// 	font-weight: bold;
	// }

	// .card .bottom .box {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	padding: 20rpx 0;
	// }

	// .card .bottom .box .lable {
	// 	width: 25%;
	// }

	// .card .bottom .box .content {
	// 	width: 74%;
	// 	text-align: right;
	// }

	.none .none1 {
		font-size: 30rpx;
		text-align: center;
		margin-top: 50rpx;
		color: #999999;
	}

	.none2 {
		font-size: 30rpx;
		text-align: center;
		margin-top: 50rpx;
		color: #999999;
	}
	/deep/ .cu-form-group uni-picker::after {
	    line-height: 14px;
	}
</style>
